<template>
  <div
    v-if="config.show === undefined || config.show"
    class="container page-header-container"
  >
    <div class="content">
      <div class="tit">营销物料申请记录</div>  
      <div class="right">
        <div
          v-if="config.right"
          class="slot-right"
          @click="handleRightClick"
          v-html="config.right"
        ></div>
        <div v-if="config.home" class="img-box" @click="handleHome">
          <img src="../../assets/images/home.png" />
        </div>
        <div
          v-if="config.close === undefined || config.close"
          class="img-box close"
        >
          <img src="../../assets/images/close.png" @click="handleClose" />
        </div>
        <div v-if="config.cancel" class="cancel" @click="handleCancel">
          取消
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { readyApi } from "hwork-widget-report-component/src/utils/index";
export default {
  name: "HomeHeader",
  props: {
    config: {
      type: Object,
      default: () => ({}),
    },
    onChange: {
      type: Function,
      default: () => {},
    },
  },
  data() {
    return {
      showShare: false,
    };
  },
  computed: {},
  methods: {
  
    /* 返回*/
    handleReturn() {
      this.config.returnEvent ? this.config.returnEvent() : this.$router.go(-1);
    },
    /* 搜索*/
    handleSearch() {
      this.config.searchEvent ? this.config.searchEvent() : null;
    },
    /* 回到首页*/
    handleHome() {
      this.config.homeEvent
        ? this.config.homeEvent()
        : this.$router.push({ path: this.config.home });
    },
    /* 关闭*/
    handleClose() {
      readyApi(() => {
        window.AlipayJSBridge.call("exitApp");
      });
    },
    /* 取消*/
    handleCancel() {
      this.config.cancel ? this.config.cancel() : null;
    },
    /* 自定义左侧内容*/
    handleLeftClick() {
      this.config.leftEvent ? this.config.leftEvent() : null;
    },
    /* 自定义右侧内容*/
    handleRightClick() {
      this.config.rightEvent ? this.config.rightEvent() : null;
    },
    /* 菜单切换*/
    handleTab(e) {
      if (this.config.checked === e) {
        return false;
      }
      this.config.onChangeEvent ? this.config.onChangeEvent(e) : null;
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .van-popup .van-share-sheet__options {
    padding: 0.25rem 0 0.25rem 0.1rem !important;
    .van-share-sheet__name{
      font-size: .15rem;
    }
    .van-share-sheet__icon{
      width: .5rem;
      height:.5rem;
    }
  }
 /deep/ .van-share-sheet__cancel{
	 height: .5rem;
	 line-height: .5rem;
   font-size: .15rem;
 }
 /deep/ .van-share-sheet__cancel::before{
	 
 }
$button-opacity: 0.7;
@mixin mixin-img {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 0.08rem;
}
.container {
  height: 0.4rem;
  background-color: #fff;
  position: fixed;
  z-index: 20000;
  width: 100vw;
  top: 0;

  .content {
    height: 0.4rem;
    position: absolute;
    /*bottom: .1rem;*/
    width: 100%;
    display: flex;
    align-items: center;
    .tit{
      font-size: .16rem;
      width: 100%;
      height: .4rem;
      text-align: center;
      line-height: .4rem;
    }
    .right {
      height: 100%;
      float: right;
      display: flex;
      position: absolute;
      right: 0;
      .slot-right {
        margin-right: 0.07rem;
        height: 0.3rem;
        width: 0.3rem;
      }
      .img-box {
        @include mixin-img;
        > img {
          height: 0.2rem;
        }
        &:active {
          > img {
            opacity: $button-opacity;
          }
        }
      }
      .close {
        > img {
          height: 0.25rem;
        }
        &:active {
          > img {
            opacity: $button-opacity;
          }
        }
      }
      .cancel {
        font-size: 0.16rem;
        color: #157efb;
        line-height: 0.3rem;
        padding: 0 0.08rem;
      }
    }
  }
}
</style>

